<!--
wireless-warn
无线报警统计（右上角）
-->
<template>
    <div class="wireless-warn">
        <!-- 这里是各个类型的轮播 -->
        <el-carousel
        :height="carouselOption.height"
        :autoplay="carouselOption.autoplay"
        :arrow="carouselOption.arrow"
        :loop="carouselOption.loop"
        :interval="carouselOption.interval"
        class="chart-carousel">
            <el-carousel-item
            v-for="item in chartsData"
            :key="item.title">
                <div class="chart-wrapper">
                    <div class="chart-item">
                        <wireless-bar
                        :chartData="item.chart"
                        :chartId="item.id"
                        :title="item.title"
                        ></wireless-bar>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import {
    getWirelessWarnData, // 无限报警统计数据接口
} from '@/apis';

export default {
    name: 'wireless-warn',
    components: {
        'wireless-bar': () => import('./wireless-bar'),
    },
    data() {
        // 轮播的配置
        this.carouselOption = {
            arrow: 'never',
            interval: 15000,
            autoplay: true,
            loop: true,
            height: '100%',
        };
        return {
            // 图表数据
            chartsData: [{
                title: '本局车本局线',
                id: 'bbChart',
                chart: {},
            }, {
                title: '外局车本局线',
                id: 'bwChart',
                chart: {},
            }, {
                title: '本局车外局线',
                id: 'wbChart',
                chart: {},
            }],
        };
    },
    methods: {
        // 获取无限报警统计数据
        getWirelessWarnings() {
            getWirelessWarnData().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    const {
                        bb,
                        bw,
                        wb,
                    } = data;
                    this.chartsData[0].chart = bb;
                    /* this.chartsData[0].chart = {
                        xAxisData: [
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                            '广州电务段',
                        ],
                        yAxisData: [
                            10,
                            22,
                            16,
                            12,
                            8,
                            19,
                            24,
                            20,
                            10,
                            3,
                            11,
                            12,
                            2,
                            10,
                            2,
                            5,
                            19,
                            20,
                        ],
                    }; */
                    this.chartsData[1].chart = bw;
                    this.chartsData[2].chart = wb;
                }
            }).catch((err) => {
                window.console.log('获取无限报警统计数据', err);
            });
        },
    },
    created() {
        this.getWirelessWarnings();
    },
};
</script>

<style lang="scss">
.wireless-warn {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-carousel {
        z-index: 1
    }

    .el-carousel__container {
        width: 100%!important;
        height: 100%!important;
        overflow: hidden;
    }

    .el-carousel__button {
        width: .22rem!important;
    }

    .chart-carousel {
        width: 100%;
        height: 100%;
        .chart-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-wrap: wrap;

            .chart-item {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                float: left;
            }
        }
    }
}
</style>
